<template>
  <div class="app-container">
    <page-header class="page-header"/>
    <div class="main-container">
      <el-form :model="searchForm" class="table-header">
        <el-form-item style="width:100%;">
          <el-col :span="8">
            <el-input label-width="auto" placeholder="输入" v-model="searchForm.keyword" style='width:500px;margin-left:10px;' ></el-input>
          </el-col>
          <el-col :span="4"><el-button style="margin-left: 80px;" type="primary" @click="searchUser">搜索</el-button></el-col>
          <el-col :span="4"><el-button style="position:absolute;right: 20px;" type="primary" @click="openForm">添加</el-button></el-col>
        </el-form-item>
      </el-form>
      <div class="table-table">
        <el-table
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column align="center" label="编号" width="95">
            <template slot-scope="scope">
              {{ scope.$index+1 }}
            </template>
          </el-table-column>
          <el-table-column label="用户名" width="200">
            <template slot-scope="scope">
              {{ scope.row.username }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="create_time" label="创建日期" width="250">
            <template slot-scope="scope">
              <!-- <i class="el-icon-time" /> -->
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>

          <el-table-column label="备注" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.remark }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope" style="float:left;">
              <el-button icon="el-icon-edit" type="primary" size="mini" @click.stop="editUser(scope.$index,scope.row)"></el-button>
              <el-button icon="el-icon-delete" type="danger" size="mini" @click.stop="deleteUser(scope.$index,scope.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <el-pagination class="table-footer" layout="prev, pager, next"
        :total="totalCount"
        :current-page="currentPage"
        :page-size="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange">
      </el-pagination>
      <!-- </div> -->
      <el-dialog :visible.sync="showUserForm" customClass='my-dialog'>
        <el-form ref='userForm' :model="user" label-width="80px">
          <el-form-item label="用户名"><el-input v-model="user.username"></el-input></el-form-item>
          <el-form-item label="密码"><el-input v-model="user.password"></el-input></el-form-item>
          <el-form-item label="备注"><el-input v-model="user.remark"></el-input></el-form-item>
          <el-form-item><el-button @click="saveUser">保存</el-button><el-button @click="closeForm">关闭</el-button></el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import PageHeader from '@/views/user/PageHeader.vue'
import { getList, addUser, findList, delUser, updateUser } from '@/api/user'

export default {
  components: {
    PageHeader
  },
  filters: {
    statusFilter (status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data () {
    return {
      currentPage: 1,
      totalCount: 0,
      pageSizes: [5, 10, 20, 50],
      pageSize: 20,

      searchForm: {},
      list: null,
      listLoading: true,
      keyword: '',
      user: {},
      showUserForm: false
    }
  },
  created () {
    this.getData(this.currentPage, this.pageSize)
  },
  methods: {
    getData (page, pageSize) {
      const _this = this
      this.listLoading = true
      getList({ page, pageSize }).then(response => {
        // console.log('user lsit ',response.data);
        const result = JSON.parse(response.data)
        _this.totalCount = result.count
        _this.list = result.data
        _this.listLoading = false
      })
    },

    searchUser () {
      findList(this.searchForm).then(response => {
        this.list = JSON.parse(response.data)
        this.listLoading = false
      })
    },

    editUser (index, row) {
      this.user = { ...row }
      this.showUserForm = true
    },

    deleteUser (index, row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delUser(row.id).then((response) => {
          if (response.msg === '删除成功') {
            this.getData(1, this.pageSize)
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getData(this.currentPage, this.pageSize)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    openForm () {
      this.showUserForm = true
    },

    saveUser () {
      if (this.user.id) {
        updateUser(this.user).then(r => {
          this.getData(1, this.pageSize)
          this.showUserForm = false
        })
      } else {
        addUser(this.user).then(r => {
          this.getData(1, this.pageSize)
          this.showUserForm = false
        })
      }
    },

    closeForm () {
      this.showUserForm = false
    },

    handleSizeChange (val) {
      this.PageSize = val
      this.getData(1, val)
      this.currentPage = 1
    },

    handleCurrentChange (val) {
      this.currentPage = val
      this.getData(val, this.PageSize)
    }
  }
}
</script>

<style scoped>

.app-container{
  position: relative;
  width: 100%;
  height: 100%;
}

.page-header {
  position:absolute;
  height: 80px;
  width: 100%;
  margin: 0;
}

.main-container {
  position:absolute;
  top:80px;
  height: calc(100% - 90px);
  width: 100%;
  margin: 0;
  padding-top: 10px;

  .table-header {
    width:100%;
    height: 60px;
    line-height: 60px;
    display: flex;
  }

  .table-table {
    position: absolute;
    top: 70px;
    width:100%;
    height: calc(100% - 70px - 60px);
  }

  .table-footer{
    position: absolute;
    bottom: 10px;
    height: 40px;
  }
}

</style>
<style>
  .my-dialog{
    width: 50%;
  }
</style>
